<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="${request.contextPath}/resources/image/desktop_logo-57.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${request.contextPath}/resources/image/desktop_logo-72.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${request.contextPath}/resources/image/desktop_logo-114.png">
    <title>100%喜帖</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/style.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/mhsc.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/swiper.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/lightbox.css">
    <style>
        .swiper-container {
            width: 90%;
            margin-top: 10px;;
            height: 350px;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
        }
        @media (max-width: 320px) {
            .swiper-container{
                height: 350px;
            }
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MjThkTBHuDZW3jG7ajlLf1y2"></script>
</head>
<body>

<!-- Modal -->
<div class="modal fade" id="openMap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="margin: 2rem;">
        <div class="modal-content">
            <div class="modal-header" style="border: none; padding-bottom: 0;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="card_map_box">
                    <div id="allmap2"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="addMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="margin: 2rem;">
        <div class="modal-content">
            <div class="modal-header" style="border: none; padding-bottom: 0;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="addMessage_wrapper">
                        <div class="addMessage_layout">
                            <div class="addMessage_header">
                                <h4>祝福留言</h4>
                                <div class="addMessage_span">
                                    <img src="${request.contextPath}/resources/image/login_small.png"/>
                                </div>
                            </div>

                            <div class="form-group" style="margin-bottom: 30px;">
                                <input id="commentName" type="text" class="form-control reste_input_addMessage"  placeholder="请输入姓名">
                            </div>
                            <div class="form-group" style="margin-bottom: 30px;">
                                <textarea id="commentValue" class="form-control reste_input_addMessage" rows="5" placeholder="留下您的祝福吧！"></textarea>
                            </div>
                            <div style="margin: 0 auto; text-align: center;">
                                <button type="submit" class="submit_btn" id="commentButton">确  认</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">

    <div class="row">
        <div id="card">
            <div class="card_title">
                <span>${invitation.bridegroom}</span><img src="${request.contextPath}/resources/image/heart_3.png"> <span>${invitation.bride}</span>
                <p>GETTING MARRIED</p>
            </div>
            <div class="card_date">2015-08-31</div>
            <div class="card_address">
                <p>${invitation.hotel}</p>
                <p>${invitation.address}</p>
                <p>${invitation.hall}</p>
            </div>
            <div class="card_openmap">
                <img class="open_baidu_map" src="${request.contextPath}/resources/image/open_map.png">
            </div>
        </div>
        <div class="card_index">
            <span class="card_player">
                <img style="width: 3rem" src="${request.contextPath}/resources/image/icon_player.png">
            </span>
            <span class="player_switch">
                <audio id="background-music" src="${request.contextPath}/retrieve/${invitation.backgroundMusic}" autoplay="autoplay" loop="loop">
                    你的浏览器不支持audio标签。
                </audio>
                <input id="player-switch" type="checkbox" checked>
                <label for="player-switch"></label>
            </span>
            <span class="quick_menu">
                <img src="${request.contextPath}/resources/image/mhsc_quick_btn.png" alt=""/>
            </span>
            <img style="padding-top: 50px;" src="${request.contextPath}/resources/image/template_con.png">
            <div class="card_index_info">
                <div class="card_index_info_left">
                    <span>新郎</span>
                    <h5>${invitation.bridegroom}</h5>
                </div>
                <div class="card_index_info_right">
                    <span>新娘</span>
                    <h5>${invitation.bride}</h5>
                </div>
            </div>
            <div class="card_index_date">
                <h6>${invitation.weddingDay_Y}年${invitation.weddingDay_M}月${invitation.weddingDay_D}日</h6>
            </div>
            <div class="card_index_address">
                <p>${invitation.hotel}</p>
                <p>${invitation.address}</p>
                <p>${invitation.hall}</p>
            </div>
        </div>
        <div class="card_countdown">
            <h4>倒计时:36天</h4>
        </div>
        <div class="card_story">
            <img src="${request.contextPath}/resources/image/story_thubmail.png">
            <p>
                两个人彼此相见，<br/>
                成为情侣。<br/>
                相约一生一起走，<br/>
                成为一家人。<br/>
                希望大家都来祝福我们的爱情，<br/>
                祝福我们的婚姻。<br/>
            </p>
        </div>
        <div class="card_video">
            <video src="${request.contextPath}/retrieve/${invitation.loveStoryVideo}" style="width: 100%; height: 100%;"  controls="controls">
                您的浏览器不支持 video 标签。
            </video>
        </div>
        <div class="card_album">
            <div class="album_flower1">
                <img src="${request.contextPath}/resources/image/album_flower1.png">
            </div>
            <div class="album_box">
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
						<#if invitation.weddingPhotos??>
						     <#list invitation.weddingPhotos as weddingPhoto>
   	                             <div class="swiper-slide">
   	                                 <a href="${request.contextPath}/retrieve/${weddingPhoto}" data-lightbox="roadtrip">
   	                                     <img src="${request.contextPath}/retrieve/${weddingPhoto}" alt="">
   	                                 </a>
   	                             </div>
							 </#list>
						<#else>
                             <div class="swiper-slide">
                                 <a href="${request.contextPath}/resources/image/img_001.png" data-lightbox="roadtrip">
                                     <img src="${request.contextPath}/resources/image/img_001.jpg" alt="">
                                 </a>
                             </div>
                             <div class="swiper-slide">
                                 <a href="${request.contextPath}/resources/image/img_002.png" data-lightbox="roadtrip">
                                     <img src="${request.contextPath}/resources/image/img_002.jpg" alt="">
                                 </a>
                             </div>
                             <div class="swiper-slide">
                                 <a href="${request.contextPath}/resources/image/img_004.png" data-lightbox="roadtrip">
                                     <img src="${request.contextPath}/resources/image/img_004.jpg" alt="">
                                 </a>
                             </div>
                             <div class="swiper-slide">
                                 <a href="${request.contextPath}/resources/image/img_003.png" data-lightbox="roadtrip">
                                     <img src="${request.contextPath}/resources/image/img_003.jpg" alt="">
                                 </a>
                             </div>
						</#if>
                    </div>
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>

                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev swiper-button-red"></div>
                    <div class="swiper-button-next swiper-button-red"></div>

                    <!-- If we need scrollbar -->
                    <div class="swiper-scrollbar"></div>
                </div>
            </div>

            <!--<div class="album_box">-->
                <!--<img src="../resources/image/album_box_img.png">-->
            <!--</div>-->
            <div class="album_flower2">
                <img src="${request.contextPath}/resources/image/album_flower2.png">
            </div>
        </div>

        <div class="card_message">
            <div class="message_flower1">
                <img src="${request.contextPath}/resources/image/message_flower1.png">
            </div>
            <h4>祝福留言</h4>
            <small>25条</small>
            <div class="message_warp">
                <div class="message_box">
                    <div class="message_top">
                        <span>呵呵</span> <span style="margin-left: 10px;">2015-07-01</span> <span style="margin-left: 10px;">08:1530</span>
                    </div>
                    <div class="message_info">
                        <p>婚纱照好漂亮，祝福你们！</p>
                    </div>
                </div>
                <div class="message_box">
                    <div class="message_top">
                        <span>呵呵</span> <span style="margin-left: 10px;">2015-07-01</span> <span style="margin-left: 10px;">08:1530</span>
                    </div>
                    <div class="message_info">
                        <p>婚纱照好漂亮，祝福你们！</p>
                    </div>
                </div>
                <div class="message_box">
                    <div class="message_top">
                        <span>呵呵</span> <span style="margin-left: 10px;">2015-07-01</span> <span style="margin-left: 10px;">08:1530</span>
                    </div>
                    <div class="message_info">
                        <p>婚纱照好漂亮，祝福你们！</p>
                    </div>
                </div>
                <div class="message_box">
                    <div class="message_top">
                        <span>呵呵</span> <span style="margin-left: 10px;">2015-07-01</span> <span style="margin-left: 10px;">08:1530</span>
                    </div>
                    <div class="message_info">
                        <p>婚纱照好漂亮，祝福你们！</p>
                    </div>
                </div>
            </div>
            <div class="message_add">+</div>
            <div class="message_flower2">
                <img src="${request.contextPath}/resources/image/message_flower2.png">
            </div>
        </div>

        <div class="card_map">
            <div id="allmap"></div>
            <div class="card_map_address">
                <span><img style="width: 5%" src="${request.contextPath}/resources/image/icon_map_location.png"/></span>
                <p>
	                ${invitation.hotel}<br/>
	                ${invitation.address}<br/>
	                ${invitation.hall}<br/>
                </p>
            </div>
        </div>

        <div class="card_map_line"></div>
        <div id="card-footer">
            <img style="width: 65%; margin-top: 20px; margin-bottom: 70px;"  src="${request.contextPath}/resources/image/footer_follow.png">
            <div class="footer">
                <img src="${request.contextPath}/resources/image/footer_logo.png">
                <div class="footer_info">
                    <p>www.100hunqing.cn</p>
                    <p>公众号:百分百喜帖</p>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="${request.contextPath}/resources/js/jquery-2.1.4.min.js"></script>
<script src="${request.contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/resources/js/lightbox.js"></script>
<script src="${request.contextPath}/resources/js/swiper.jquery.min.js"></script>
<script src="${request.contextPath}/resources/js/touch_main.js"></script>
<script>
	function loadWeddingComments(){
		$.ajax({  
	        type : "GET",  //提交方式  
	        url : "${invitation.weddingInvitationId}/comments",//路径  
	        success : function(result) {//返回数据根据结果进行相应的处理  
	            if ( result.success ) {  
	                $("#tipMsg").text("删除数据成功");  
	                tree.deleteItem("${org.id}", true);  
	            } else {  
	                $("#tipMsg").text("删除数据失败");  
	            }  
	        }  
	    });
	};
	
    $(document).ready(
	        loadWeddingComments();
            function(){
                $('.open_baidu_map').on('click',function(){
                    $('#openMap').modal();
                    setTimeout(function() {//添加延时加载。解决问题
                        // 百度地图API功能
                        var map = new BMap.Map("allmap2");
                        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
                        var local = new BMap.LocalSearch(map, {
                            renderOptions:{map: map},
							pageCapacity: 1
                        });
                        local.search('${invitation.address!'上海市浦东新区国展路'}');
                    },300);
                });

                $("#player-switch").click(function(){
                    var music = document.getElementById("background-music");
                    if(music.paused){
                        music.play();
                        $("#player-switch").attr("checked",true);
                    }else{
                        music.pause();
                        $("#player-switch").attr("checked",false);
                    }
                });
				
                $('.message_add').on('click',function(){
                   $('#addMessage').modal();
                });

                $('#card').hide();

                $('.quick_menu').on('click',function(){
                    var isCardTop = $('#card');
                    if(isCardTop.is(':hidden')){
                        isCardTop.show();
                    }else{
                        isCardTop.hide();
                    }
                });

                var mySwiper = new Swiper ('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    spaceBetween: 30
                });
				
				$('#commentButton').on('click',function(){
					$.ajax({  
				        type : "POST",  //提交方式  
				        url : "${request.contextPath}/cards/${invitation.weddingInvitationId}/comments",//路径 ,
						data : 'commentName='+$('#commentName').val() + '&commentValue='+$('#commentValue').val(),
				        success : function(result) {//返回数据根据结果进行相应的处理  
				            if(result.status == 'success'){
							    alert('post suc');
							}else{
							    alert('post fail');
							}
				        }  
				    });
                });
				
            }
    );

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map},
		pageCapacity: 1
    });
    local.search('${invitation.address!'上海市浦东新区国展路'}');
    $('.card_map_address').find('IMG').on('click',function(){
        local.search("上海市浦东新区国展路");
    })
</script>
</body>
</html>